<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div>
    <table>
        <thead>
            <td>商品ID</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>商品状态</td>
            <td>
                <button class="updateBtn" type="button" value="修改" data-id="${item._id}">修改</button>
                <button class="delete" type="button" value="删除" data-id="${item._id}">删除</button>
            </td>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div>
    <div class="create">
        <div class="tit">新增库存</div>
        <div class="input"><label for="">商品名称：</label><input type="text" id="addname"></div>
        <div class="input"><label for="">商品价格：</label><input type="text" id="addprice"></div>
        <div class="input"><label for="">商品数量：</label><input type="text" id="addnum"></div>
        <div>
            <label>商品图片</label>
            <input type="file" id="uploadBtn" multiple>
        </div>
        <div id="showImages">

        </div>
        <div class="input sex"><label for="">上架状态:</label>
            <div class="sexBox">
                <p><input type="radio" name="state" id="T" value="已上架"><label>已上架</label></p>
                <p><input type="radio" name="state" id="F" value="未上架"><label>未上架</label></p>
            </div>
        </div>
        <div class="input"><label for="">门店：</label><input type="text" id="addshopId"></div>
        <input type="button" class="btn" id="addGoods" value="新增">
    </div>
</div>

<body>


    <script src="./js/jquery.min.js"></script>
    <script>
        //渲染商品
        // let pageData = {
        //     pageSize: 2,
        //     nowPage: 1,
        //     searchType: "",
        //     searchValue: ""
        // }
        render()
        function render(data) {
            $.ajax({
                url: '/goods/getGoods',
                type: 'get',
                data,
                async: false,
                success(msg) {
                    if (msg.total) {
                        // pageData.total = msg.total
                        add(msg.data)
                    } else {
                        add(msg)
                    }
                    function add(msg) {
                        let tbHtml = msg.map(item => (
                            `
                        <tr class="row">
                            <td class="_id">${item._id}</td>
                            <td class="name">${item.name}</td>
                            <td class="price">${item.price}</td>
                            <td class="num">${item.num}</td>
                            <td class="state">${item.state}</td>
                            <td class="btn">
                                <button  class="updateBtn" type="button" value="修改" data-id="${item._id}">修改</button>
                                <button  class="delete" type="button" value="删除" data-id="${item._id}">删除</button>
                            </td>
                        </tr>
                        `
                        ))
                        $("tbody").html(tbHtml)
                    }

                    // $("#pageNum").html(pageData.nowPage)
                }
            })

            $('#addGoods').click(function () {
                console.info("111")
                // 获取新增学生数据
                const name = $("#addname").val();
                const price = $("#addprice").val();
                const num = $("#addnum").val();
                const imagePath = $("#showImages > img").attr('src');
                const state = $('[name=state]:checked').val();
                const shopsId = $("#addshopId").val();
                // 发送学生数据到后端
                $.ajax({
                    url: '/goods/addGoods',
                    type: 'POST',
                    data: { name, price, num, imagePath, state, shopsId },
                    // traditional: true,  // data 中有数组类型的数据
                    success(msg) {
                        console.log(msg);
                        if (msg) {
                            alert('新增成功');
                            render();
                        }
                    }
                })
            })
        }
    </script>
</body>

</html>